<template>
	<view>
		<view class="loginTop">
			<text class="loginTit">欢迎登录</text>
			<text>请登录以获取更多学习资源</text>
		</view>
		<view class="loginCon">
			<u-form :model="formData" ref="uForm" :errorType="errorType" :rules="rules">
				<u-form-item prop="account">
					<u-input type="text" v-model="formData.account" @change="getConfig" name="account" class="uni-input" placeholder="请输入手机号" :clearable="true"></u-input>
				</u-form-item>
				<u-form-item prop="password" class="pr">
					<u-input v-model="formData.password" type="password" name="password" class="uni-input" placeholder="请输入密码" :clearable="false"  :password-icon="true" />
				</u-form-item>
				<u-form-item prop="code" class="pr flex" v-if="needCode">
					<u-input v-model="formData.code" name="code" class="uni-input" placeholder="请输入验证码" :clearable="false" style="flex:1" />
					<image :src="domain + imgUrl" @click="changeImg" mode="heightFix" style="height: 44px;"></image>
				</u-form-item>
				<view class="reg-btn">
					<u-button class="btn-submit" type="primary" :loading="loading" :disabled="loading" @click="formSubmit">登录</u-button>
					<navigator url="/pages/register/index" style="text-align: right; margin-top: 10px;font-size: 14px;color: #008cff;">注册</navigator>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import { getInfo, getConfig } from '@/api/login'
	export default {
		data() {
			return {
				loading: false,
				formData:{
					account:'',
					password:'',
					code: '',
					timestamp: '',
				},
				rules: {
				    account: [
						{
							required: true, 
							message: '请输入手机号码',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: true, 
							message: '请输入密码',
							trigger: ['change','blur'],
						}
					],
				},
				errorType: 'toast',
				needCode: false,
				domain: this.$globalSetting.domain,
				imgUrl: "",
				// timestamp: "",
				codeLength: 4,
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getConfig(val) {
				if (!val) return;
				getConfig(this.formData.account).then((res) => {
					this.needCode = !!res.data.enableVerificationCode;
					if (this.needCode) {
						this.codeLength = res.data.verificationCodeNumber || 4;
						this.changeImg();
					}
				});
			},
			changeImg() {
				let timestamp = Math.random();
				this.formData.timestamp = timestamp;
				this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`;
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},
			loginSever() {
				let account = this.formData.account;
				let pwd = this.formData.password;
				let code = this.formData.code;
				let timestamp = this.formData.timestamp;
				let param = {
					account: account ? account : '',
					password: pwd ? pwd : '',
					code: code ? code : '',
					timestamp: timestamp ? timestamp : '',
				}
				this.loading = true;
				this.$store.dispatch('user/login', param)
				.then(() => {
					uni.setStorageSync('isTourist', false);
					uni.setStorageSync('isDzFlag', false);
					// 是否是大众
					getInfo({
						// applicationId: parames.applicationId == "all" ? "" : parames.applicationId,
						applicationId: "all"
					})
					.then((response) => {
						let data = response.data.permissionList;
						for(let i in data) {
							// 专题培训
							if (data[i].modelId == '664052738669150213') {
								if(data[i].button.length == 0) {
									uni.setStorageSync('isDzFlag', true);
								}
							}
						}
					});
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/index/index'
						})
					}, 1200)
					this.loading = false;
				})
				.catch((err) => { 	
					this.showSuccess(err,'none');
					this.loading = false;
				})
			},
			formSubmit() {
				this.$refs.uForm.validate().then(res => {
					if (this.needCode && this.formData.code.length == 0) {
						this.showSuccess('请输入验证码','none');
						return;
					}
					this.loginSever();
				}).catch(errors => {
					console.log('校验失败')
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}
	.loginTop {
		color: #888;
		font-size: 28rpx;
		padding: 20% 0 0 60rpx;
		box-sizing: border-box;
	}
	.loginTit {
		font-size: 55rpx;
		font-weight: bold;
		color: #000;
		display: block;
		padding-bottom: 15rpx;
		box-sizing: border-box;
	}
	.loginCon {
		padding: 60rpx;
		box-sizing: border-box;
	}
	.uni-input {
		background-color: #f3f4f9;
		border-radius: 20rpx;
		padding: 20rpx 30rpx !important;
		border: none !important
	}
	.btn-submit {
		border-radius: 10rpx;
		background-color: #008cff;
	}
	.reg-btn {
		margin-top: 30rpx;
	}
	.reg-btn button{
		width: 100%;
	}
	.forget {
		font-size: 28rpx;
		text-align: right;
		color: #8a8a8a;
	}

</style>
